<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="from">
        活动名称：<input type="text" id="nam"><br>
        活动区域：<input type="text" id="action"><br>
        活动时间：<input type="date" id="time"><br>
        活动性质：<input type="checkbox" name="kind" value="美食/餐厅线上活动">美食/餐厅线上活动
        <input type="checkbox" name="kind" value="地推活动">地推活动<br>
        &emsp;&emsp;&emsp;&emsp;&emsp;<input type="checkbox" name="kind" value="线下主题活动">线下主题活动
        <input type="checkbox">单纯品牌曝光<br>
        特殊资源：<input type="radio" name="as" value="线上品牌商赞助">线上品牌商赞助
        <input type="radio" name="as" value="线下场地免费">线下场地免费<br>
        活动形式：<textarea name="" id="form" cols="30" rows="5"></textarea><br>
        &emsp;&emsp;&emsp;&emsp;&emsp;<button id="sub">立即创建</button>
        <button>取消</button>
    </div>
    <div id="table1">
        <table id=tab1>
            <thead>
                <tr>
                    <th>活动名称</th>
                    <th>活动区域</th>
                    <th>活动时间</th>
                    <th>活动性质</th>
                    <th>活动资源</th>
                    <th>活动性质</th>
                    <th>操作</th>
                </tr>
            </thead>
        </table>
        <table id="tab">

        </table>
    </div>
    <style>
        * {
            margin: 20px auto;
        }

        #from {
            width: 400px;
            height: 600px;
            border: #000 1px solid;
            padding-left: 10px;
            margin: 20px auto;
        }

        button {
            width: 100px;
            height: 40px;
        }

        #tab1,
        #tab {
            border-collapse: collapse;
        }

        #tab {
            margin-top: -20px;
        }

        th,
        td {
            height: 40px;
            width: 180px;
            text-align: center;
            border: #000 1px solid;
        }
    </style>
</body>
<script>
    window.onload = function () {
        document.getElementById("sub").addEventListener("click",
            function () {
                var name = document.getElementById("nam").value
                var action = document.getElementById("action").value
                var time = document.getElementById("time").value
                var kind = funqx()
                var resources = fundx()
                var from = document.getElementById("form").value

                var obj = {
                    name: name,
                    action: action,
                    time: time,
                    kind: kind,
                    resources: resources,
                    from: from

                }
                fun(obj)
                fun1()
            })
        fun1()
    }

    //添加数据
    function fun(obj) {
        if (!localStorage.getItem('list')) {
            localStorage.setItem('list', JSON.stringify([obj]))

        } else {
            var data = JSON.parse(localStorage.getItem('list'))
            data.push(obj)
            localStorage.setItem('list', JSON.stringify(data))
        }
    }

    //   获取列表
    function fun1() {
        if (!localStorage.getItem('list')) {
            return
        }
        var data = JSON.parse(localStorage.getItem('list'))
        var str = ""
        for (let item in data) {
            str += `<tr>
                <td>${data[item].name}</td>
                <td>${data[item].action}</td>
                <td>${data[item].time}</td>
                <td>${data[item].kind}</td>
                <td>${data[item].resources}</td>
                <td>${data[item].from}</td>
                <td><a href="#" onclick="del(${item})">删除</a></td>
                   </tr>`
        }
        document.getElementById('tab').innerHTML = str

    }

    //多选
    function funqx() {
        var data = document.getElementsByName("kind")
        var str = ""
        for (i = 0; i < data.length; i++) {
            if (data[i].checked == true) {
                str += document.getElementsByName("kind")[i].value + " "
            }
        }
        return str
    }
    //单选
    function fundx() {
        var data = document.getElementsByName("as")
        var str = ""
        for (i = 0; i < data.length; i++) {
            if (data[i].checked == true) {
                str += document.getElementsByName("as")[i].value + " "
            }
        }
        return str
    }
    //删除
    function del(index) {
        var data = JSON.parse(localStorage.getItem('list'))
        data.splice(index, 1)
        localStorage.setItem("list", JSON.stringify(data))
        fun1()
    }
</script>

</html>